<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers SLD based selection control</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        .olControlSLDSelectBoxActive {
            cursor: crosshair;
        }
        .olControlSLDSelectPolygonActive {
            cursor: crosshair;
        }
        .olControlSLDSelectLineActive {
            cursor: crosshair;
        }
        .olControlSLDSelectPointActive {
            cursor: pointer;
        }
    </style>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, controls, layers;

        function init(){
            OpenLayers.ProxyHost= "proxy.cgi?url=";
            map = new OpenLayers.Map('map', {allOverlays: true, controls: []});
            var url = "http://demo.boundlessgeo.com/geoserver/wms";
            layers = {
                states: new OpenLayers.Layer.WMS("State boundary", url,
                    {layers: 'topp:tasmania_state_boundaries', format: 'image/gif', transparent: 'TRUE'},
                    {singleTile: true}),
                roads: new OpenLayers.Layer.WMS("Roads", url,
                    {layers: 'topp:tasmania_roads', format: 'image/gif', transparent: 'TRUE'},
                    {singleTile: true}),
                waterbodies: new OpenLayers.Layer.WMS("Water bodies", url,
                    {layers: 'topp:tasmania_water_bodies', format: 'image/gif', transparent: 'TRUE'},
                    {singleTile: true}),
                cities: new OpenLayers.Layer.WMS("Cities", url,
                    {layers: 'topp:tasmania_cities', format: 'image/gif', transparent: 'TRUE'},
                    {singleTile: true})
            };

            for (var key in layers) {
                map.addLayer(layers[key]);
            }

            map.setCenter(new OpenLayers.LonLat(146.65748632815,-42.230763671875), 7);

            map.addControl(new OpenLayers.Control.LayerSwitcher());

            controls = {
                navigation: new OpenLayers.Control.Navigation(),
                box: new OpenLayers.Control.SLDSelect(
                    OpenLayers.Handler.RegularPolygon,
                    {
                        displayClass: 'olControlSLDSelectBox', 
                        layers: [layers['waterbodies']],
                        handlerOptions: {irregular: true}
                    }
                ),
                polygon: new OpenLayers.Control.SLDSelect(
                    OpenLayers.Handler.Polygon,
                    {
                        displayClass: 'olControlSLDSelectPolygon',
                        layers: [layers['waterbodies']]
                    }
                ),
                line: new OpenLayers.Control.SLDSelect(
                    OpenLayers.Handler.Path,
                    {
                        displayClass: 'olControlSLDSelectLine',
                        layers: [layers['waterbodies']]
                    }
                ),
                point: new OpenLayers.Control.SLDSelect(
                    OpenLayers.Handler.Click,
                    {
                        displayClass: 'olControlSLDSelectPoint',
                        layers: [layers['waterbodies']]
                    }
                ),
                circle: new OpenLayers.Control.SLDSelect(
                    OpenLayers.Handler.RegularPolygon,
                    {
                        displayClass: 'olControlSLDSelectBox',
                        layers: [layers['waterbodies']],
                        handlerOptions: {sides: 30}
                    }
                )
            };

            for(var key in controls) {
                map.addControl(controls[key]);
            }
        }

        function toggleControl(element) {
            for(var key in controls) {
                var control = controls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }

        function toggleSelectionLayer(element) {
            var selectLayers = [];
            var elements = element.value.split("_");
            for (var key in layers) {
                var layer = layers[key];
                for (var i=0, len=elements.length; i<len; i++) {
                    var value = elements[i];
                    if (value == key && element.checked) {
                        selectLayers.push(layer);
                    }
                }
            }
            for (var i=0, len=this.map.controls.length; i<len; i++) {
                var control = this.map.controls[i];
                if (control instanceof OpenLayers.Control.SLDSelect) {
                    control.setLayers(selectLayers);
                }
            }
        }

    </script>
  </head>
  <body onload="init()">
    <h1 id="title">SLD based selection on WMS layers</h1>

    <div id="tags">
        sld, sldselect, styling, style
    </div>

    <div id="shortdesc">Using Styled Layer Descriptors to make a selection on WMS layers</div>

    <div id="map" style="width: 512px; height: 256px; border: 1px solid red;"></div>

    <div id="docs">
        This example uses the OpenLayers.Control.SLDSelect to select features in a WMS
        layer. The features are highlighted using Styled Layer Descriptors (SLD). The
        control supports point, box, line and polygon selection modes by configuring the
        appriopriate handler.
    </div>

    <div id="controls">
        <ul id="controlToggle"><b>Map Controls</b>
            <li>
                <input type="radio" name="control" value="navigation" id="noneToggle" onclick="toggleControl(this);" CHECKED>
                <label for="noneToggle">navigate</label>
            </li>
            <li>
                <input type="radio" name="control" value="box" id="boxToggle" onclick="toggleControl(this);">
                <label for="boxToggle">SLD select with box</label>
            </li>
            <li>
                <input type="radio" name="control" value="polygon" id="polygonToggle" onclick="toggleControl(this);">
                <label for="polygonToggle">SLD select with polygon</label>
            </li>
            <li>
                <input type="radio" name="control" value="line" id="lineToggle" onclick="toggleControl(this);">
                <label for="lineToggle">SLD select with line</label>
            </li>
            <li>
                <input type="radio" name="control" value="point" id="pointToggle" onclick="toggleControl(this);">
                <label for="pointToggle">SLD select with point</label>
            </li>
            <li>
                <input type="radio" name="control" value="circle" id="circleToggle" onclick="toggleControl(this);">
                <label for="circleToggle">SLD select with circle</label>
            </li>
        </ul>
    </div>
    <div id="layers">
        <ul id="layerToggle"><b>Selection layer</b>
            <li>
                <input type="radio" name="layer" value="waterbodies" id="waterbodiesToggle" onclick="toggleSelectionLayer(this);" CHECKED>
                <label for="noneToggle">Water bodies</label>
            </li>
            <li>
                <input type="radio" name="layer" value="cities" id="citiesToggle" onclick="toggleSelectionLayer(this);">
                <label for="citiesToggle">Cities</label>
            </li>
            <li>
                <input type="radio" name="layer" value="roads" id="roadsToggle" onclick="toggleSelectionLayer(this);">
                <label for="roadsToggle">Roads</label>
            </li>
            <li>
                <input type="radio" name="layer" value="roads_cities" id="roadsCitiesToggle" onclick="toggleSelectionLayer(this);">
                <label for="roadsCitiesToggle">Roads and cities</label>
            </li>
        </ul>
    </div>

  </body>
</html>
